<template>
    <!-- 新增编辑弹窗 -->
    <el-dialog v-model="dialogUserRole" @close="cancel" width="600px">
      <template #header>
        <div class="header-title">导出账单</div>
      </template>
      <el-form style="display: flex;flex-wrap: wrap;" :model="form" :rules="rules" ref="formRef" label-width="90px">
            <el-form-item label="文件名" prop="rentBuyPrice">
              <span>业务账单+年-月-日</span>
              </el-form-item>
              <el-form-item label="导出格式" prop="rentOutPrice">
                 <el-select v-model="rentOutCurrency" style="width: 150px" placeholder="请选择">
                          <el-option
                              v-for="item in formatList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                          />
                        </el-select>
                
              </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="cancel()">取消</el-button>
               <el-button type="primary" @click="submitForm(formRef)">导出</el-button>
            </div>
         </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue'
import { exportBill } from '@/api/financial/bills'
import { downloadFile } from '@/utils/download'
import type { FormInstance, FormRules } from 'element-plus'
const formatList=ref([
  {
    value:'xlsx',
    label:'xlsx'
  },
])

const formRef=ref()
const dialogUserRole=ref(false) //弹框
const rentOutCurrency=ref('xlsx')
const data = reactive({
  form: {
    // billType:[],
    billIds:[],
  },
  rules: {
  }
});
const { form, rules } = toRefs(data);
const onShow = async (row,type) => {
  dialogUserRole.value = true 
  form.value.billIds=row
  // form.value.billType=type

}
/** 提交按钮 */
const submitForm = (formEl: FormInstance | undefined) =>{
  if (!formEl) return
  formEl.validate(valid => {
   let dataForm=JSON.parse(JSON.stringify(form.value))
    if (valid) {
        exportBill(dataForm).then(res => {
          downloadFile(res, '业务账单')
          ElMessage.success('导出成功');
          cancel();
        });
    }
  });
};
//关闭弹框
const cancel = () => {
  formRef.value.resetFields()// 重置数据
  dialogUserRole.value=false
  form.value.billIds=[]
  // form.value.billType=[]
}
defineExpose({ onShow })
</script>

<style scoped>
.choose-item-2 {
  margin-left: 20px;
}
.stust{
  padding:0 20px;
}
.choose-item-3 {
  display: block;
  margin-left: 20px;
}
.main-cent{
  padding: 0 10px;
}
.input-sel {
  border: 1px solid #C0C4CC; 
  border-radius: 4px;
  overflow: hidden;

}
.input-sel :deep(.el-input__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; /* 去掉圆角 */
  border-left: 1px solid #C0C4CC; /* 默认下边框颜色 */
}
.input-sel :deep(.el-select__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; 
}
.header-title{
  border-left: 4px solid #2158F3;
  padding-left: 8px;
  line-height: 18px;
}
</style>